<template>
    <div class="container">
        <div class="fixed">
          <miao-header>
            <span slot="header">个人中心</span>
          </miao-header>
          <div class="headPortrait-box"></div>
          <div class="headPortrait">
            <img src="../assets/logo.png" alt="">
            <span>{{userId}}</span><br>
            <span class="headPortrait_tel">{{telNumber}}</span>
            <router-link to="/register" tag="div" class="register">
              <span v-if="!this.$_store.get('userId')">请登录</span>
              <span v-if="this.$_store.get('userId')">去注销</span>
            </router-link>
          </div>
        </div>
        <sevice :highlight="$route.params.highlight"></sevice>
        <miao-footer :highlight="$route.params.highlight"></miao-footer>
    </div>
</template>

<script>
    import  sevice from '../components/sevice.vue'
    export default {
        name: "center",
        data(){
            return{
              userId:null,
              telNumber:null
            }
        },
        created(){
          this.$_store.get('userId')?this.userId = '用户:'+this.$_store.get('userId').substring(0,8):this.userId = '绑定手机使用红包';
          this.$_store.get('userTel')?this.telNumber = this.$_store.get('userTel'):this.telNumber = '欢迎使用';
        },
        components:{
            sevice
        }

    }
</script>

<style scoped>
    *{
        margin: 0;
        padding: 0;
    }
    .container{
        width: 100vw;
        background: linear-gradient(to left,#31e07c,#1cd245);
        height: 100vh;
        overflow: hidden;
    }
    .fixed{
      background: linear-gradient(to left,#31e07c,#1cd245);
    }
    .service{
        list-style: none;
    }
    .headPortrait-box{
      background: linear-gradient(to left,#31e07c,#1cd245);
      height: 80px;
      width: 100vw;
    }
    .headPortrait{
      position: relative;
      width: 100%;
      height: 160px;
      background: linear-gradient(to left,#31e07c,#1cd245);
    }
    .headPortrait>.headPortrait_tel{
      font-size: 30px;
    }
    .register{
      display: inline-block;
      position: absolute;
      right: 0;
      top:40px;
      width: 140px;
      text-align: center;
      color: #55a532;
      font-size: 24px;
      line-height: 50px;
      height: 50px;
      background: #fff;
      border-top-left-radius: 25px;
      border-bottom-left-radius: 25px;
    }
    .headPortrait>img{
        display: inline-block;
        float: left;
        width:120px;
        height: 120px;
        border-radius: 50%;
        padding: 18px 30px;
    }
    .headPortrait>img ,.headPortrait>span{
        vertical-align: middle;
    }
    .headPortrait>span{
        display: inline-block;
        line-height: 1;
        padding-top: 32px;
        color: #fff;
        font-size: 34px;
    }
    .service>.active{
        color: #6cd440;
    }
</style>
